<template>
  <div class="detail-data" style="height: 100%">
    <div class="top">
      <el-page-header content="详情页面" @back="goBack" />
    </div>
    <div v-loading="isRequesting" class="bottom">
      <VirtualTable
        childrenAlisas="childDetail"
        :rowStyle="rowStyle"
        rowKey="rfqRowId"
        :table="tableData"
      >
        <!-- 层级 -->
        <Cell align="left" fix="left" label="层级" prop="level" :width="200" />
        <!-- rowNo -->
        <!-- <Cell fix="left" :label="$t('FdData.rowNo')" :width="50">
          <template slot-scope="scope">
            <span>{{ scope.index + 1 }}</span>
          </template>
        </Cell> -->
        <!-- ItemNo -->
        <Cell label="ItemNo" prop="itemNo" />
        <!-- 报价 -->
        <Cell label="DP报价" prop="dpPrice" />
        <!-- 正式物料编码 -->
        <Cell label="正式物料编码" prop="partNumber" />
        <!-- 物料描述 -->
        <Cell label="物料描述" prop="partName" />
        <!-- 数量 -->
        <Cell label="数量" prop="qty" />
        <!-- 尺寸 -->
        <Cell label="尺寸" prop="size" />
        <!-- TempCode -->
        <Cell label="TempCode" prop="tempCode" />
        <!-- solution -->
        <Cell label="Solution" prop="solution" />
        <!-- 材质描述 -->
        <Cell label="材质描述" prop="materialDetail" />
        <!-- 工艺描述 -->
        <Cell label="工艺描述" prop="idProcess" />
        <!-- 拥有者 -->
        <Cell label="拥有者" prop="owner" />
        <!-- 供应商 -->
        <cell label="一级供应商" prop="vendor1" />
        <Cell label="二级供应商" prop="vendor2" />
        <Cell label="三级供应商" prop="vendor3" />
        <Cell label="四级供应商" prop="vendor4" />
        <Cell label="五级供应商" prop="vendor5" />

        <!-- Category -->
        <Cell label="Category" prop="category" />
        <!-- commodity -->
        <Cell label="Commodity" prop="commodity" />
        <!-- gcmOwner -->
        <Cell label="Gcm Owner" prop="gcmOwner">
          <template slot-scope="scope">
            {{ gcmOwnerById(scope.row.gcmOwner) }}
          </template>
        </Cell>
        <!-- RD Function -->
        <Cell label="RD Function" prop="rdFunction" />
        <!-- gcmFunction -->
        <Cell label="Gcm Function" prop="gcmFunction" />
        <!-- 模穴数 -->
        <Cell label="模穴数" prop="toolingCave" />
        <!-- 重量 -->
        <Cell label="重量" prop="weight" />
        <!-- Cost -->
        <Cell label="Cost" prop="cost" />
        <!-- trackingOption -->
        <Cell label="Tracking & Option" prop="trackingOption" />
      </VirtualTable>
    </div>
  </div>
</template>

<script>
import { rfqTotalQuery } from '@/api/rfq/rfq'
import Cell from '@/widgets/VirtualTable/Cell'
import VirtualTable from '@/widgets/VirtualTable/Table'
// import RfqCellShowSet from '../../components/RfqCellShowSet'
import rfqCell from '@/mixins/rfqCell'
export default {
  name: 'RfqTotalDetailView',
  components: { VirtualTable, Cell },
  mixins: [rfqCell],
  props: {
    // 行数据
    rowData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      // 正在查询
      isRequesting: false,
      // 表格数据
      tableData: [],
      // 颜色分层
      colorData: {
        1: '#B0E0E6',
        2: '#E0FFFF',
        3: '#90EE90',
        4: '#FFDEAD',
        5: '#FFFAF0',
        6: '#F5F5F5'
      },
      pageId: 'RfqTotalDetailView'
    }
  },
  computed: {
    // 混入查找gcmOwner方法 减少代码量
    gcmOwnerById() {
      return gcmOwner => {
        if (gcmOwner && gcmOwner.length) {
          const newVal = []
          for (const val of gcmOwner) {
            newVal.push(this.$store.getters['user/getUserNameById'](val))
          }
          return newVal.join('|')
        } else {
          return ''
        }
      }
    }
  },
  watch: {},
  created() {
    this.getDetailData()
  },
  mounted() {},
  methods: {
    // 拉取详情数据
    async getDetailData() {
      try {
        this.isRequesting = true
        const { data: res } = await rfqTotalQuery({
          totalRfqId: this.rowData.totalRfqId,
          version: this.rowData.version
        })
        this.tableData = res
      } catch (error) {
        console.log(error)
      } finally {
        this.isRequesting = false
      }
    },
    // 返回
    goBack() {
      this.$emit('cancel')
    },
    rowStyle(index, row) {
      return {
        backgroundColor: this.colorData[row.level]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.detail-data {
  width: 100%;
  height: 100%;
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  overflow: hidden;
}
.top {
  padding-top: 10px;
  height: 50px;
}

.bottom {
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  bottom: 5px;
}
</style>
